<template>
  <div class="card-colume">
    <div class="card-content">
      <nut-infiniteloading
        @loadmore="onInfinite"
        :use-window="false"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="200"
      >
        <ul class="list">
          <li class="list-item" v-for="(item, index) of data" :key="index">
            <div class="list-item-content">
              <img :src="imgUrl" alt />
              <div class="list-item-detail">
                <div class="item-info-name">
                  <span>新人专享优惠券</span>
                  <span>
                    <i class="iconfont makerqian"></i>
                    100
                  </span>
                </div>
                <div class="item-info">
                  <span>数量： 1</span>
                  <span>满200可用</span>
                </div>
              </div>
            </div>
            <div class="use-date">有效期 2020/10/01-2020/10/30</div>
          </li>
        </ul>
      </nut-infiniteloading>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardVolume',
  data() {
    return {
      imgUrl: require('../../assets/image/icon094.png'),
      data: new Array(10),
      page: 2,
      num: 30,
      isHasMore: true,
      isLoading: false,
      isErr: false,
      timer: null,
    };
  },
  methods: {
    onInfinite() {
      console.log('aa')
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= 5) {
          this.data = new Array(this.num * this.page);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="scss">
.card-colume {
  width: 100vw;
  height: 94vh;
  overflow: hidden;
  .card-content {
    width: 94vw;
    margin: 20px 3vw 0;
    height: 100%;
    overflow: auto;
    .list {
      width: 100%;
      height: 100%;
      .list-item {
        // height: 12vh;
        margin-bottom: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 16px 16px 0;
        .list-item-content {
          display: flex;
          justify-self: start;
          align-items: center;
          img {
            width: 49px;
            height: 45px;
          }
          .list-item-detail {
            padding-left: 10px;
            width: 100%;
            height: 45px;
            position: relative;
            & > div {
              height: 20px;
              position: relative;
            }
            .item-info-name {
              & > span {
                position: absolute;
                top: -6px;
              }
              & > span:first-child {
                left: 0;
                color: #1e2533;
                font-size: 16px;
                font-weight: bold;
                width: 51vw;
                display: inline-block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              & > span:last-child {
                right: 0;
                top: -8px;
                color: #ff4b33;
                font-size: 30px;
                font-weight: normal;
                // position: relative;
              }
              & > span > i {
                position: absolute;
                left: -10px;
                font-size: 12px;
                top: 4px;
              }
            }
            .item-info {
              // line-height: 24px;
              & > span:first-child {
                font-weight: normal;
                font-size: 14px;
                color: #1e2533;
              }
              & > span:last-child {
                font-size: 10px;
                color: #b3b3b3;
                position: absolute;
                right: 0;
                top: 4px;
              }
            }
          }
        }
        .use-date {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border-top: 1px dashed #f3f3f3;
          color: #b3b3b3;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
